<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-vue基础-指令-v-on</title>
</head>
<body>
  <div id="app">
    <!-- v-on:具体事件="处理逻辑" 处理逻辑：简单js表达式 或者  methods中的函数 -->

    <!-- v-on:具体事件="处理逻辑" 传统写法 -->
    <button v-on:click="isShow = false">隐藏DIV</button>

    <!-- @ 是 v-on: 的简写 -->
    <!-- 
      情况：如果处理逻辑的代码很多，不是一个简单的表达式能够搞定的，
      建议绑定methods中的函数，在函数中实现较为复杂的逻辑，比较常见。
    -->

    <!-- 
      情况：如果在事件绑定的函数中获取 事件对象
      如果1：绑定函数的时候加上了括号  @click="show($event)" 使用$event传递事件对象
      如果2：绑定函数的时候没有加括号  其实会有默认传参  就是事件对象
     -->

     <!-- 
       情况：在触发事件的时候，给绑定的函数传参
       如果：你需要给绑定的函数传参 @click="show($event,100)" 必须带上括号
      -->
    <button @click="show($event,100)">显示DIV</button>

    <div v-show="isShow">我是一个DIV</div>

    <!-- @事件名称.事件修饰符="处理逻辑" -->

    <!-- a标签绑定点击事件  阻止默认行为-->
    <a href="http://www.baidu.com" @click.prevent="fn">百度</a>
    <!-- 让事件只触发一次 -->
    <span @click.once="fn1">只触发一次事件</span>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data : {
        isShow: true
      },
      methods: {
        // 显示div
        show (e, num) {
          // e 就是事件对象
          console.log(e)
          console.log(num)

          // this就是vm  就是vue实例
          this.isShow = true
        },
        // fn函数
        fn () {
          console.log('点击了A标签')
        },
        // fn1 函数
        fn1 () {
          console.log('点击SPAN标签')
        }
      }
    })
  </script>
</body>
</html>